Make button (control) visible or invisible : Document « Development « JavaScript DHTML






Make button (control) visible or invisible



/*
JavaScript Bible, Fourth Edition
by Danny Goodman 

John Wiley & Sons CopyRight 2001
*/

<HTML>
<HEAD>
<TITLE>Data Binding</TITLE>
<STYLE TYPE="text/css">
#display {width:500px; border:10px ridge blue; padding:20px}
.hiddenControl {display:none}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function nextField() {
    var elem = document.all.display
    var fieldName = elem.dataFld
    var currFieldNum = parseInt(fieldName.substring(7, fieldName.length),10)
    currFieldNum = (currFieldNum == 10) ? 1 : ++currFieldNum
    elem.dataFld = "Article" + currFieldNum
}
function prevField() {
    var elem = document.all.display
    var fieldName = elem.dataFld
    var currFieldNum = parseInt(fieldName.substring(7, fieldName.length),10)
    currFieldNum = (currFieldNum == 1) ? 10 : --currFieldNum
    elem.dataFld = "Article" + currFieldNum
}
function toggleComplete() {
    if (document.all.buttonWrapper.className == "") {
        document.all.display.dataSrc = "#rights_raw"
        document.all.display.dataFld = "column1"
        document.all.display.dataFormatAs = "text"
        document.all.buttonWrapper.className = "hiddenControl"
    } else {
        document.all.display.dataSrc = "#rights_html"
        document.all.display.dataFld = "Article1"
        document.all.display.dataFormatAs = "HTML"
        document.all.buttonWrapper.className = ""
    }
}
</SCRIPT>
</HEAD>
<BODY>
<P><B>U.S. Bill of Rights</B></P>
<FORM>
<INPUT TYPE="button" VALUE="Toggle Complete/Individual" onClick="toggleComplete()">
<SPAN ID="buttonWrapper" CLASS="">
<INPUT TYPE="button" VALUE="Prev" onClick="prevField()">
<INPUT TYPE="button" VALUE="Next" onClick="nextField()">
</SPAN>
</FORM>

<DIV ID="display" DATASRC="#rights_html" DATAFLD="Article1" DATAFORMATAS="HTML"></DIV>
<OBJECT ID="rights_html" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
    <PARAM NAME="DataURL" VALUE="Bill of Rights.txt">
    <PARAM NAME="UseHeader" VALUE="True">
    <PARAM NAME="FieldDelim" VALUE="&#09;">
</OBJECT>
<OBJECT ID="rights_raw" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
    <PARAM NAME="DataURL" VALUE="Bill of Rights (no format).txt">
    <PARAM NAME="FieldDelim" VALUE="\">
    <PARAM NAME="RowDelim" VALUE="\">
</OBJECT>
</BODY>
</HTML>

           
       








Related examples in the same category

1.Output HTML in JavaScript
2.Output
with Javascript
3.Display info in a new page
4.Recursively reverse all nodes beneath Node n, and reverse Text nodes
5.Reverse the order of the children of Node (document)
6.Open a new document and add some text
7.Get element by name: getElementsByName()
8.Get a specified element using getElementById()
9.Title of a document
10.Referrer of a document (URL of the document)
11.Hide Email Address
12.Convert space to URL encode
13.document last Modified Property in Another Format
14.Checking document referrer
15.Opening a New URL
16. HTML Page with Immediate Script Statements
17.Using document.write() on the Current Window
18.Using document.write() on Another Window
19.Methods and Properties of the Document Object